import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaTableNew } from 'comsMobx';

let WeaTable = WeaTableNew.WeaTable;
import {
  WeaTop,
  WeaTab,
  WeaRightMenu,
  WeaErrorPage,
  WeaTools,
  WeaPopoverHrm,
  WeaLocaleProvider,
} from 'ecCom';
import { Button } from 'antd';
import CoworkConstant from '../util/CoworkConstant';
import * as CoworkUtil from '../util/CoworkUtil';
import { toJS } from 'mobx';

const getLabel = WeaLocaleProvider.getLabel;
const { viewer } = WeaTools;
/**
 * 我的帖子
 */
@inject('coworkMineStore')
@observer
class Mine extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.coworkMineStore.doInit();
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.location.key !== nextProps.location.key) {
      this.props.coworkMineStore.doInit();
    }
  }

  componentWillUnmount() {
    // 组件卸载时一般清理一些状态
    const { coworkMineStore } = this.props;

    coworkMineStore.setShowSearchAd(false);
    coworkMineStore.setSelectedKey('all');
    coworkMineStore.clearFormFields();
  }

  render() {
    const { coworkMineStore } = this.props;
    const {
      comsWeaTableStore,
      loading,
      form,
      conditioninfo,
      topTab,
      selectedKey,
      showSearchAd,
      sessionkey,
    } = coworkMineStore;
    const buttonsAd = [
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@7sk03a@search`}
        type="primary"
        onClick={this.onTabSearch}
      >
        {getLabel(197, '搜索')}
      </Button>,
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@t5yp8x@reset`}
        type="ghost"
        onClick={this.onTabReset}
      >
        {getLabel(2022, '重置')}
      </Button>,
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@88uvee@cancel`}
        type="ghost"
        onClick={this.onTabCancel}
      >
        {getLabel(201, '取消')}
      </Button>,
    ];

    return (
      <div className="wea-cowork-mine">
        <WeaPopoverHrm
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaPopoverHrm@48hdin`}
        />

        <WeaRightMenu
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaRightMenu@ljc6hh`}
          datas={this.getRightMenu()}
          onClick={this.onRightMenuClick}
        >
          <WeaTop
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaTop@yx0hb6`}
            title={getLabel(81733, '我的帖子')}
            loading={loading}
            icon={CoworkConstant.icon}
            iconBgcolor={CoworkConstant.iconBgColor}
            buttonSpace={10}
            showDropIcon={true}
            dropMenuDatas={this.getRightMenu()}
            onDropMenuClick={this.onRightMenuClick}
          >
            <WeaTab
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_WeaTab@q84dyz`}
              datas={topTab}
              keyParam="groupid"
              onChange={this.changeTab}
              selectedKey={selectedKey}
              searchType={['base', 'advanced']}
              searchsBaseValue={
                form.isFormInit &&
                form.getFormParams() &&
                form.getFormParams().remark
              }
              setShowSearchAd={this.setShowSearchAd}
              showSearchAd={showSearchAd}
              hideSearchAd={this.hideSearchAd}
              searchsAd={CoworkUtil.getSearchs(form, conditioninfo, () => {
                coworkMineStore.setShowSearchAd(false);
                coworkMineStore.doTableLoading();
              })}
              buttonsAd={buttonsAd}
              onSearch={coworkMineStore.doTableLoading}
              onSearchChange={this.onSearchChange}
            />
            <WeaTable
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_WeaTable@zlgqsu`}
              comsWeaTableStore={comsWeaTableStore}
              loading={loading}
              sessionkey={sessionkey}
              needScroll={true}
              hasOrder={true}
              getColumns={this.getNewColumns}
            />
          </WeaTop>
        </WeaRightMenu>
      </div>
    );
  }

  setShowSearchAd = bool => this.props.coworkMineStore.setShowSearchAd(bool);
  hideSearchAd = () => this.props.coworkMineStore.setShowSearchAd(false);
  onSearchChange = v =>
    this.props.coworkMineStore.appendFormFields({ remark: v });
  onLogViewCancel = () => this.setState({ showLog: false });

  // 切换tab事件
  changeTab = (theKey) => {
    const { coworkMineStore } = this.props;

    coworkMineStore.setSelectedKey(theKey);
    coworkMineStore.setShowSearchAd(false);
    coworkMineStore.clearFormFields();
    coworkMineStore.doTableLoading();
  };

  // 右键菜单
  getRightMenu() {
    let btns = [];
    btns.push({
      key: 'search',
      icon: <i className="icon-coms-search" />,
      content: getLabel(2022, '重置'),
    });
    btns.push({
      key: 'ShowCustomColumns',
      icon: <i className="icon-coms-Custom" />,
      content: getLabel(382660, '显示定制列'),
    });
    // btns.push({ key: "collection", icon: <i className='icon-coms-Custom'/>, content: '收藏' });
    // btns.push({ key: "help", icon: <i className='icon-coms-Custom'/>, content: '帮助' });
    return btns;
  }

  // 右键菜单事件绑定
  onRightMenuClick = (key) => {
    const { coworkMineStore } = this.props;
    if (key == 'search') {
      coworkMineStore.setShowSearchAd(false);
      coworkMineStore.doTableLoading();
    } else if (key == 'ShowCustomColumns') {
      const { comsWeaTableStore, sessionkey } = toJS(coworkMineStore);
      comsWeaTableStore.setColSetVisible(sessionkey, true);
      comsWeaTableStore.tableColSet(sessionkey, true);
    }
  };

  onTabSearch = () => {
    const { coworkMineStore } = this.props;
    coworkMineStore.setShowSearchAd(false);
    coworkMineStore.doTableLoading();
  };
  onTabReset = () => {
    const { coworkMineStore } = this.props;
    coworkMineStore.clearFormFields();
  };
  onTabCancel = () => {
    const { coworkMineStore } = this.props;
    coworkMineStore.setShowSearchAd(false);
  };

  onRemarkClick = (e) => {
    if (e.target.nodeName === 'IMG') {
      let img = e.target;
      img.setAttribute('data-imgsrc', img.src);
      img.setAttribute('class', 'formImgPlay');
      viewer(e);
    }
  };

  // 自定义过滤渲染
  getNewColumns = (columns) => {
    let newColumns = '';
    newColumns = columns.map((column) => {
      let newColumn = column;
      newColumn.render = (text, record) => {
        // 前端元素转义
        let valueSpan =
          record[`${newColumn.dataIndex}span`] !== undefined
            ? record[`${newColumn.dataIndex}span`]
            : record[newColumn.dataIndex];
        let url = '';
        if (newColumn.dataIndex == 'coworkname') {
          url = CoworkUtil.getViewCoworkUrl(record.coworkid);
        } else if (newColumn.dataIndex == 'floorNum') {
          url = CoworkUtil.getViewCoworkOfFloorNnmUrl(
            record.coworkid,
            record.floorNum,
          );
        }
        if (newColumn.dataIndex === 'remark') {
          return (
            <div
              className={'cowork-tablename-remark wea-url'}
              dangerouslySetInnerHTML={{
                __html: CoworkUtil.replaceFun(valueSpan),
              }}
              onClick={this.onRemarkClick}
            />
          );
        }
        return url == '' ? (
          <div
            className="wea-url"
            dangerouslySetInnerHTML={{ __html: valueSpan }}
          />
        ) : (
          <div
            className="wea-url-name"
            style={{ cursor: 'pointer' }}
            title={text}
            onClick={() => {
              window.open(url);
            }}
            dangerouslySetInnerHTML={{ __html: valueSpan }}
          />
        );
      };
      return newColumn;
    });
    return newColumns;
  };
}

export default WeaTools.tryCatch(
  React,
  props => (
    <WeaErrorPage
      ecId={`${
        (this && this.props && this.props.ecId) || ''
      }_WeaErrorPage@wsk75v`}
      msg={
        props.error
          ? props.error
          : getLabel(186, '对不起，该页面异常，请联系管理员！', 'error')
      }
    />
  ),
  { error: '' },
)(Mine);
